Sencha Touch এর পরিচিতি
Sencha Touch একটি JavaScript ফ্রেমওয়ার্ক যা মোবাইল এবং ট্যাবলেট অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। এটি HTML5, CSS3, এবং JavaScript প্রযুক্তির উপর ভিত্তি করে তৈরি, যা দ্রুত এবং প্রতিক্রিয়াশীল মোবাইল ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে। Sencha Touch ফ্রেমওয়ার্কটি শক্তিশালী, ইউজার-ফ্রেন্ডলি ইন্টারফেস এবং উন্নত ইউআই কন্ট্রোল দিয়ে ডিজাইন করা হয়।
একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা Sencha Touch কে মোবাইল অ্যাপ্লিকেশন ডেভেলপমেন্টে প্রভাবশালী করে তোলে, তা হলো এর routing system। Routing মূলত একটি অ্যাপ্লিকেশনের ভিতরে বিভিন্ন ভিউ বা পেজের মধ্যে নেভিগেশন বা রিডাইরেকশন ব্যবস্থাপনা করে।
Sencha Touch এ Routing সিস্টেম
Routing সিস্টেমটি একটি ওয়েব অ্যাপ্লিকেশনে পেজ বা ভিউ পরিবর্তন করতে ব্যবহৃত হয়। এটি URL এর মাধ্যমে অ্যাপ্লিকেশনের বিভিন্ন অংশে অ্যাক্সেস করে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে। Sencha Touch এ routing ব্যবস্থাপনা করার জন্য কিছু নির্দিষ্ট পদ্ধতি রয়েছে।
Sencha Touch এ routing সিস্টেম ব্যবহারের জন্য, Ext.application এর মধ্যে controllers এবং views ব্যবহৃত হয়। এটি অ্যাপ্লিকেশন রুটিং পরিচালনা করে এবং অ্যাপ্লিকেশন ভিউগুলির মধ্যে সহজে নেভিগেশন করতে সহায়তা করে।
Sencha Touch এ Routing সিস্টেম সেটআপ
Sencha Touch এ routing সিস্টেম কনফিগার করার জন্য নিম্নলিখিত পদক্ষেপগুলো অনুসরণ করা যেতে পারে:
১. Sencha Touch অ্যাপ্লিকেশন তৈরি করা
প্রথমে একটি নতুন Sencha Touch অ্যাপ্লিকেশন তৈরি করতে হবে। এর জন্য আপনি Sencha Cmd ব্যবহার করতে পারেন।
sencha generate app MyApp /path/to/project
এটি একটি নতুন অ্যাপ্লিকেশন তৈরি করবে যার মধ্যে অ্যাপ্লিকেশন স্ট্রাকচার, ফোল্ডার এবং ফাইল থাকবে।
২. Routes এবং Controllers তৈরি করা
Sencha Touch-এ routing সিস্টেম ব্যবহারের জন্য আপনাকে Controller তৈরি করতে হবে যা routes এবং তাদের অ্যাকশন পরিচালনা করবে।
Controller তৈরি করা:
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
routes: {
'home': 'onHome', // home route
'about': 'onAbout', // about route
'product/:id': 'onProduct' // dynamic route for product
},
control: {
// Views and actions can be controlled here
}
},
onHome: function() {
// Code to load home view
console.log("Home page is loaded");
},
onAbout: function() {
// Code to load about view
console.log("About page is loaded");
},
onProduct: function(id) {
// Code to load a product based on its ID
console.log("Product with ID: " + id + " is loaded");
}
});
এখানে, routes কনফিগারেশন অ্যাপ্লিকেশনের URL এর বিভিন্ন পাথ (path) কনফিগার করে, এবং প্রতিটি রুটের জন্য একটি ফাংশন নির্ধারণ করা হয়, যা ঐ রুটে পৌঁছালে কল হবে।
৩. Views তৈরি করা
Sencha Touch এ routing সিস্টেমে ভিউ (views) নির্ধারণ করাও গুরুত্বপূর্ণ। যখন ব্যবহারকারী কোনও নির্দিষ্ট রুটে যাবে, তখন views লোড হবে।
View তৈরি করা:
Ext.define('MyApp.view.Home', {
extend: 'Ext.Panel',
xtype: 'home',
config: {
title: 'Home',
html: 'Welcome to the Home Page'
}
});
এখানে, একটি Home ভিউ তৈরি করা হয়েছে, যা Home রুটে পৌঁছালে ব্যবহারকারীর কাছে প্রদর্শিত হবে।
৪. Application Configurations
এখন অ্যাপ্লিকেশন কনফিগার করতে হবে যাতে রাউটিং সিস্টেম ঠিকভাবে কাজ করে। Ext.application এর মধ্যে Controller এবং Views কে যুক্ত করা হয়।
Ext.application({
name: 'MyApp',
controllers: ['Main'],
launch: function() {
Ext.Viewport.add({
xtype: 'home' // Set initial view
});
}
});
এখানে, Main কন্ট্রোলার যোগ করা হয়েছে এবং অ্যাপ্লিকেশন লঞ্চ হওয়ার সময় প্রথমে Home ভিউ প্রদর্শিত হবে।
৫. Navigation এবং URL Manipulation
আপনি Ext.Component এবং Ext.Container এর মাধ্যমে অ্যাপ্লিকেশন নেভিগেশন পরিচালনা করতে পারেন। Routing সিস্টেম URL পরিবর্তন করে পেজ নেভিগেশন করতে সহায়তা করে।
URL Manipulation:
// To navigate programmatically
this.redirectTo('about');
// To navigate to product page with dynamic parameter
this.redirectTo('product/123');
এখানে, redirectTo ব্যবহার করে অ্যাপ্লিকেশনকে রুটে রিডাইরেক্ট করা হচ্ছে।
Routing সিস্টেমে ভ্যালিডেশন
Sencha Touch অ্যাপ্লিকেশনে Routing সিস্টেম ব্যবহার করার সময় কিছু ভ্যালিডেশন এবং নিরাপত্তা বিষয়গুলো নিশ্চিত করা গুরুত্বপূর্ণ:
- প্যারামিটার ভ্যালিডেশন: ডাইনামিক রুটে (যেমন
product/:id) প্যারামিটার গ্রহণের সময় তাদের ভ্যালিডেশন নিশ্চিত করুন। - 404 পেজ: যদি ব্যবহারকারী একটি অচেনা রুটে চলে যায়, তবে একটি 404 পেজ বা "Page Not Found" প্রদর্শন করুন।
উদাহরণ:
onProduct: function(id) {
if (!this.isValidProduct(id)) {
this.redirectTo('home'); // Redirect to home if product id is invalid
}
// Load the product details
},
isValidProduct: function(id) {
return /^[0-9]+$/.test(id); // Validates if ID is a number
}
এখানে, product ID যাচাই করা হচ্ছে এবং যদি এটি অবৈধ হয়, তবে ব্যবহারকারীকে হোম পেজে রিডাইরেক্ট করা হচ্ছে।
সারাংশ
Sencha Touch এ Routing সিস্টেম ব্যবহারের মাধ্যমে আপনি একাধিক ভিউ এবং পেজের মধ্যে সঠিকভাবে নেভিগেশন করতে পারবেন। এটি অ্যাপ্লিকেশনের ইউজার ইন্টারফেস উন্নত করতে সহায়তা করে, বিশেষ করে মোবাইল ওয়েব অ্যাপ্লিকেশনগুলোতে। Controllers, Routes, এবং Views ব্যবহারের মাধ্যমে Sencha Touch-এ একটি শক্তিশালী রাউটিং সিস্টেম তৈরি করা যায়, যা অ্যাপ্লিকেশন নেভিগেশন এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে সাহায্য করে।
Read more
